<!-- 首页 -->
<template>
	<div id="home" class="app">
		<div class="info">
			<mt-cell v-for="item of info" :title="item.title" :value="item.value"></mt-cell>
		</div>
		<table border="0" class="course" cellspacing="0">
			<caption>课程表</caption>
			<thead>
				<tr>
					<th v-for="item in course.th" class="black">{{item}}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in course.data">
					<td class="black">{{(course.time)[index]}}</td>
					<td v-for="value in item" :style="getHightLight(value)">{{value}}</td>
				</tr>
			</tbody>
		</table>
		
	</div>
</template>

<script>
import Vue from 'vue'
import { Cell } from 'mint-ui';
import { Toast } from 'mint-ui';
import { Indicator } from 'mint-ui';

Vue.component('mt-cell', Cell);

export default {
	name: 'home',
	//首页一开始默认加载的数据
	created : function(){
		this.createdGetData()
	},
	data () {
		return {
		 	info : {
				 stuNum : { title : "学号", value : '' },
				 name : { title : "姓名", value : '' },
				 grade : { title : "年级", value : '' },
				 major : { title : "专业", value : '' }
		 	},
		 	course : {
		 		th : ["", "星期一","星期二","星期三","星期四","星期五"],
		 		time : ["09:00 - 10:20","10:40 - 12:00","12:30 - 13:50","14:00 - 15:20","15:30 - 16:50","17:00 - 18:20","19:00 - 20:20","20:30 - 21:50"],
		 		data : []
		 	},
		}
	},
	computed : {
		// 通过判断 store 中refreshName值等于当前路径 / 就刷新
		calcRefresh(newVal,oldVal){
			if(this.$store.state.refreshName == '/'){
				console.log('执行刷新')
				// 将 refreshName 重新设置为 空
				this.$store.commit({
					type : 'changeRefreshName',
					refreshName :''
				})
				this.createdGetData()
			}
		}
	},
	//需要watch一下才能够获取到值，不知道为什么
	watch : {
		calcRefresh(){}
	},
	methods : {
		//页面已加载就发出请求以及改变导航栏标题
		createdGetData(){
			this.$store.dispatch({
				type : 'postData',
				url : 'http://qietu.wenye123.com/test_mysise/curl.php?method=course',
				data : {
					user : this.$store.state.user,
					pass : this.$store.state.pass,
					sise_cookie : this.$store.state.sise_cookie,
				},
				callBack :(data)=>{
					//console.log(data)
					if( data.code==200 && data.msg=='success'){
						// 获取学生 info 数据
						let info = data.resData.info;
						for(let key in info) {
							this.$set((this.info)[key], 'value', info[key])
						}
						//获取学生 课表 数据
						let course = data.resData.course;
						this.$set(this.course, "data", course)
					} else if (data.code == 404 && data.msg == "failed") {
						//关闭加载框
						Indicator.close();
						//提示
						Toast({
							message : '获取数据失败',
							position : 'bottom',
							duration : 3000
						});
					}
				}
			});
			this.$store.commit({
				type : 'changeTitleFn',
				title : '课程表'
			});
		},
		
		// 课表有数据的加亮
		getHightLight(value){
			if(value != ""){
				let color = ["#73c0ae", "#62bee1", "#ed9ea1", "#f4c76c", "#99d261"]
				return {
					backgroundColor : color[ Math.floor(Math.random()*5) ]
				};
			}
		}
	}
}
</script>

<style>
	#home {
		
	}
	#home .course {
		width: 1000px;
		overflow: hidden;
		background: #CCFFFF;
	    margin:0 auto;
	}
	#home .course .black {
		color: #333;
	}
	#home .course th, #home .course td {
		font-size: 14px;
		width: 100px;
		border-left: 1px solid #fff;
		border-top: 1px solid #fff;
		padding: 5px;
		color: #fff;
	}
</style>
